{% extends 'ZaysoAreaBundle:Layout:layout.html.twig' %}

{% block title %}Area - Schedule{% endblock %}

{% block content %}
<div>
    <p></p>
<div>
<form method="post" action="{{ path('zayso_core_schedule_referee_list') }}">
<table border="1" class="form_table" width="800" id="schedule-referee-search">
    <tr><th colspan="1">Search Referee Schedule</th></tr>
    <tr><td>
<table border="1" style="margin: 0px; padding: 0px;">
    <tr>
        <td>From:</td>
        <td>{{ searchView.genDate('refSchedSearchData[date1x]',refSchedSearchData.date1) | raw }}</td>
        <td>{{ searchView.genHour('refSchedSearchData[time1x]',refSchedSearchData.time1) | raw }}</td>
        <td>
            <a href="{{ path('zayso_core_schedule_referee_list', { '_format': 'xls' }) }}">Excel</a>
        </td>
    </tr><tr>
        <td>To:</td>
        <td>{{ searchView.genDate('refSchedSearchData[date2x]',refSchedSearchData.date2) | raw }}</td>
        <td>{{ searchView.genHour('refSchedSearchData[time2x]',refSchedSearchData.time2) | raw }}</td>
        <td>
            Sort By: {{ searchView.genSortByPickList(refSchedSearchData.sortBy) | raw }}
        </td>
    </tr>
</table>
    <tr><td>
<table style="margin: 0px; padding: 0px;" >
    <tr>
        <td>{{searchView.genAges   (refSchedSearchData) | raw}}</td>
        <td>{{searchView.genGenders(refSchedSearchData) | raw}}</td>
    </tr>
    <tr>
        <td>{{searchView.genRegions(refSchedSearchData) | raw}}</td>
        <td></td>
    </tr>
</table>
     </td></tr>
    <tr>
        <td align="center"><input type="submit" name="ref_schedule_submit" value="Search" /></td>
    </tr>
</table>
</form>
</div>
<div style="color: red"><p>Games marked in red are canceled.</p></div>
<div>
<table class="schedule-referee-list" id="schedule-referee-list">
    <tr><th colspan="6">Referee Schedule - Game Count {{ gameCount }}</th></tr>
    <tr>
        <td class="game-num">Game</td>
        <td class="game-date">Date</td>
        <td class="game-time">Time</td>
        <td class="game-field">Field</td>
        <td class="game-teams">Home/Away Teams</td>
        <td class="game-officials">Referees</td>
    </tr>
    {% for game in games %}
        <tr id="ref-sched-{{game.num}}" class="game-status-{{game.status}}">
            <td>
                <a href="{{ path('zayso_area_schedule_game_edit', { 'id': game.id })}}">{{ game.getNum() }}</a>
                <br />{{ game.status }}
                {% if game.reportStatus == 'Fake' %}
                    <br />
                    <a  href="{{ path('zayso_area_schedule_game_report', { 'id': game.id })}}"
                        class="game-report-status-{{game.reportStatus}}">
                        Report
                    </a>
                {% endif %}
            </td>
            <td>{{ game_date(game.date) }}</td>
            <td>{{ game_time(game.time) }}</td>
            <td>{{ game.fieldDesc       }}</td>
            <td>
                {% for teamRel in game.teams %}
                    {{ game_team_desc2(teamRel) }}<br />
                {% endfor %}
            </td>
            <td><table class="game-officials-list">
                {% for gamePerson in game.eventPersonsSorted  %}
                {% set person = gamePerson.personz %}
                <tr>
                    <td>
                        <a href="{{ path('zayso_area_schedule_referee_assign', { 'id': game.id, 'pos': gamePerson.type }) }}">
                           {{ gamePerson.type }}:</a>
                    </td>
                    <td>{{ person.personName }}</td>
                </tr>
                {% endfor %}
            </table></td>
        </tr>
    {% endfor %}
</table>
</div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {% include 'ZaysoCoreBundle:Layout:jquery-ui-css.html.twig' %}

<style>
table.schedule-referee-list
{
    /* width: 1000px; */
    border: 3px solid black;
    margin:  0px;
    padding: 0px;
    font-size: 85%;
}
table.schedule-referee-list tr
{
    border: 2px solid red;
    color: red;
    margin:  0px;
    padding: 0px;
}
table.schedule-referee-list td,th
{
    border: 1px solid green;
    color: black;
    margin:  0px;
    padding: 0px;
}
table.schedule-referee-list td.game-num
{
    border: 1px solid blue;
    color:  blue;
    width:  50px;
}
table.schedule-referee-list td.game-date
{
    width:  75px;
}
table.schedule-referee-list td.game-time
{
    width:  75px;
}
table.schedule-referee-list td.game-field
{
    width:  100px;
}
table.schedule-referee-list td.game-teams
{
    width:  200px;
}
table.schedule-referee-list td.game-officials
{
    width:  200px;
}
#layout-content table.game-officials-list
{
    border: none;
    margin:  0px;
    padding: 0px;
    color: yellow;
}
#layout-content table.game-officials-list td
{
    border: none;
    margin:  0px;
    padding-left: 2px;
    color: black;
}
table.schedule-referee-list table.game-officials-listxxx
{
    border: none;
    margin:  0px;
    padding: 0px;
    color: red;
}

.zayso-date-desc { font-family: monospace; font-size: 1.0em; }
        
.ui-widgetxxx { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: .75em; }

#layout-content a.game-report-status-Pending
{ 
    color: red; 
    text-decoration: none;
}
#layout-content a.game-report-status-Submitted
{ 
    color: magenta; 
    text-decoration: none;
}
#layout-content a.game-report-status-Approved
{ 
    color: green; 
    text-decoration: none;
}
#layout-content a.game-report-status-Future
{ 
    display: none;
    color:   red; 
    text-decoration: none;
}

tr.game-status-Cancelled
{
    background-color: red;    
}
</style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% include 'ZaysoCoreBundle:Layout:jquery-ui-js.html.twig' %}

<script>

$(document).ready(function() 
{
    // Check loading
    // Zayso.exclaim('Referee Schedule');
   
    // do stuff when DOM is ready
    $('.zayso-checkbox-all').change(Zayso.checkboxAll);
    
    $('.zayso-date-gen').change(Zayso.dateGen);
    
    $('.zayso-date-desc').datepicker({
        dateFormat: 'D M dd yy',
        firstDay: 0,
        
        numberOfMonths:   3,
        showCurrentAtPos: 1, // Confusing for Dec/Jan, fixed in beforeShow
        
        showOtherMonths: true,
        selectOtherMonths: true,
        
        changeMonth: true,
        changeYear:  true,
        yearRange: '2001:2016', // Reversing does not seem to work
        
        beforeShow: function(input, inst) 
        { 
            var options = { showCurrentAtPos: 1 };
            
            var date = $(input).val();
            var month = date.substring(4,7);
 
            if (month == 'Jan') options.showCurrentAtPos = 0;
            if (month == 'Aug') options.showCurrentAtPos = 0;
            
          //console.log(month + ' ' +  options.showCurrentAtPos);
             
            return options;
            
            alert('Before Show ' + $(input).val());
        },
        
        // onChange would be nice but would need anothe hidden value
        onClosex: Zayso.dateChanged,
        
        onClose: function (dateText, inst)
        {
            // Convert date to standard format
            // Can't call static methods dynamically
            var dateFormat = $(this).datepicker('option','dateFormat');
            var date = $.datepicker.parseDate (dateFormat,dateText);
            dateText = $.datepicker.formatDate('yymmdd',date);
            
            // Sets the scope to the dom element
            Zayso.dateChanged.call(this,dateText);
            return;
            
            alert('Date: ' + dateText);
            return;
            var name = $(this).attr('name');
          //var name =    $(this).html();
            alert('Selected ' + name + ' ' + $(this).val());
        }
    });
   
});
</script>

{% endblock %}
